<template>

    <el-tabs type="border-card" v-model="atype">
      <el-tab-pane  label="预约设置" name="first">
        <el-form :model="formConfig.foot" :rules="rules" ref="settingForm" label-width="100px">
          <el-form-item label="按钮颜色" prop="btnColor">
            <el-color-picker v-model="formConfig.foot.btnColor"></el-color-picker>
          </el-form-item>

          <el-form-item label="主按钮文字" prop="btnTitle">
            <el-input v-model="formConfig.foot.btnTitle"></el-input>
          </el-form-item>

          <el-form-item label="副标题文字" prop="btnSubtitle">
            <el-input v-model="formConfig.foot.btnSubtitle"></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formConfig.foot.phone"></el-input>
          </el-form-item>
        </el-form>


      </el-tab-pane>
      <el-tab-pane label="二维码联系设置" name="second">
        <el-form :model="formConfig.foot" :rules="rules" ref="settingForm" label-width="80px">
          <el-form-item label="底部图片">
            <el-upload :action="uploadApi" list-type="picture-card" :auto-upload="true" :file-list="formConfig.foot.list" name="upload" drag :limit="formConfig.foot.limit" :on-success="onUploadChange" :on-exceed="onUploadExceed" :on-remove="onUploadRemove" :headers="uploadHeaders" :on-error="onUploadError" accept=".jpg,.png,.jpeg">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-tab-pane>

    </el-tabs>
    <!--  <div slot="header">预约设置</div> -->


</template>
<script>
  import { getToken } from '@/utils/auth'
  const token = getToken()
  console.log(token,getToken())
  const Authorization = `Bearer ${token}`
  export default {
    name: 'FootSetting',
    filters: {},
    props: {
      formData: {
        type: Object,
        default: function () {
          return {}
        },
      },
      formConfig: {
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        atype:'first',
        uploadApi: `${process.env.VUE_APP_BASE_HOST}upload/cloud`,
        uploadHeaders: {
          Authorization,
        },
        rules: {
          btnTitle: [
            { required: true, message: '请输入主按钮文字', trigger: 'blur' },
          ],
          btnSubtitle: [
            { required: true, message: '请输入副标题文字', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              min: 11,
              max: 11,
              message: '请输入正确的手机号',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    watch: {
      'formConfig.foot': {
        handler: function (val) {
          const { btnColor, btnSubtitle, btnTitle, phone } = val

          const { componentId } = this.formConfig

          this.formData.components.forEach((v) => {
            if (v.id === componentId) {
              v.btnColor = btnColor
              v.btnSubtitle = btnSubtitle
              v.btnTitle = btnTitle
              v.phone = phone
            }
          })
        },
        deep: true,
        immediate: true,
      },
    },
    created() {},
    methods: {
      // 文件上传添加
      onUploadChange(res) {
        const { url, filename } = res

        const { componentId } = this.formConfig

        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.url = url
            v.urlList = [{ name: filename, url }]
          }
        })
      },

      // 超出文件
      onUploadExceed() {
        this.$message({
          message: '抱歉，只能上传一张图片',
          type: 'error',
        })
      },

      // 移除
      onUploadRemove() {
        const { componentId } = this.formConfig

        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.url = ''
            v.urlList = []
          }
        })
      },
      async onUploadError(err) {
        if (err.status) {
          this.$message({
            message: '上传错误',
            type: 'error',
          })

          // await this.$store.dispatch('user/logout')
          // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          // return
        }

        this.$message({
          message: '上传失败，请重试',
          type: 'error',
        })
      },
    },
  }
</script>
